import { DomView, Stateful } from "../libs/vanillaTS";
import { Canvas } from "../libs/vanillaTS/components/Canvas";
import { setDomBackgroundColor } from "../libs/vanillaTS/libs/DomBackground";
import { MenuController } from "../libs/tauriUtils/MenuController";
import { RadarScreen } from "../libs/RadarCanvasDrawer";
import { PluginData } from "../libs/classes/ExternalPluginData";
import { TauriInvoker } from "../libs/tauriUtils/TauriInvoker";
import { error } from "@tauri-apps/plugin-log";
import { open } from "@tauri-apps/plugin-dialog";
import { loadPrfFile } from "../libs/fileLoader/loadPrfFile";
export class MainView extends DomView {
    moving: boolean = false;
    canvasElement?: HTMLCanvasElement;
    startX: number = 0;
    startY: number = 0;

    @Stateful
    build() {
        Canvas(c => {
            RadarScreen.bindCanvas(c);
            this.canvasElement = c;
        })
            .on('wheel', e => RadarScreen.updateScaleIndexByWheelEvent(e))
            .on('contextmenu', e => {
                e.preventDefault();
                this.moving = true;
                if (!this.canvasElement) return;
                this.startX = e.clientX - this.canvasElement.offsetLeft;
                this.startY = e.clientY - this.canvasElement.offsetTop;
            })
            .on('mousemove', e => {
                if (!this.moving || !this.canvasElement) return;
                RadarScreen.setCameraByMouseEvent(e);
                const dX = e.clientX - this.startX;
                const dY = e.clientY - this.startY;
                this.canvasElement.style.marginLeft = dX + 'px';
                this.canvasElement.style.marginTop = dY + 'px';
            })
            .on('mouseup', e => {
                if (this.canvasElement) {
                    this.canvasElement.style.marginLeft = '0px';
                    this.canvasElement.style.marginTop = '0px';
                }
                if (e.button == 2) {
                    this.moving = false;
                    RadarScreen.draw();
                }
            })
            .on('click', () => {
                TauriInvoker.createWindow({ label: 'Setting', url: 'testPage.html', title: 'Setting' }).then(() => {
                    setDomBackgroundColor('#000000', 'Setting');
                });
            })
            .on('dblclick', e => {
                console.log(JSON.stringify(RadarScreen.getMousePosition(e)));
            })
            .width('100%')
            .height('100%')
            .build()
    }
}

async function init() {
    await setDomBackgroundColor('#000000', 'main');
    await MainView.init();
    await PluginData.init();
    try {
        await MenuController.refresh();
    } catch (e) {
        error(`failed to refresh menu ${e}`);
    }
    open({ filters: [{ extensions: ['prf'], name: 'Prf file' }] }).then(uri => {
        if (uri == null) return;
        loadPrfFile(uri).then(() => RadarScreen.draw());
    });
}

init().then(() => {
}).catch(e => {
    console.error(e);
}).finally(() => {
})